<template>
  <div class="choice-item">
    <div class="box">
      <div class="head">
        <div class="t1">{{tag}}</div>
        <div class="t2">{{name}}</div>
        <div class="t3">{{content}}</div>
      </div>
      <div class="choice-country-list">
        <div class="left">
          <div v-for="(item, index) in data" class="item" :key="index" @click="update(index)" :class="{active: active === index}">{{item.name}}</div>
        </div>
        <div class="right">
          <div class="introduce">{{detail.description}}</div>
          <div v-html="detail.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  module.exports = {
    props: ['tag', 'name', 'content', 'data'],
    data() {
      return {
        active: 0,
      }
    },
    computed: {
      detail() {
        return this.data[this.active]
      }
    },
    methods: {
      update(active) {
        this.active = active
      },
      apply(row) {
        console.log('当前选中的学校数据 ===> ', row)
      }
    },
      mounted() {
        $(".u-a").attr("href",'javascript:;')
      }
  }
</script>

<style>
table th{background:#f8f8f8;}
.u-a{cursor:pointer;}
</style>